<template>
  <a-modal
    :visible="visible"
    :afterClose="hanldeAfterClose"
    @cancel="close"
    @ok="close"
    :width="848"
    title="打印">
    <template slot="footer">
      <y-button>关闭</y-button>
      <y-button ref="printBtn" v-print="printObj" type="primary">立即打印</y-button>
    </template>
    <div id="printArea" ref="test">
      <a-spin :spinning="spinning">
        <div class="title">{{ detailData.Name }}</div>
        <div class="text-right p-y-16">电子档案建档日期：{{ detailData.CreateDate | moment }}</div>
        <table border="1">
          <thead>
            <tr>
              <th>档案编号</th>
              <th colspan="5">{{ detailData.IDNO }}</th>
            </tr>
            <tr>
              <th></th>
              <th width="60">序号</th>
              <th>材料名称</th>
              <th width="60">页数</th>
              <th class="border-right-none">备注</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td :rowspan="detailData.ArchivesDir ? detailData.ArchivesDir.length + 1 : 12">附件清单</td>
            </tr>
            <tr v-for="(item, index) in detailData.ArchivesDir" :key="item.ID">
              <td>{{ index + 1 }}</td>
              <td>{{ item.DirName }}</td>
              <td>{{ item.Pages }}</td>
              <td>{{ item.Descr }}</td>
            </tr>
            <tr>
              <td>其他信息</td>
              <td colspan="5" class="text-left">
                <p v-for="item in detailData.ArchivesDetail" :key="item.ID">{{ item.KeyName }}：{{ item.KeyValue }}</p>
              </td>
            </tr>
            <tr>
              <td>备注</td>
              <td colspan="5" class="text-left">{{ detailData.Descr }}</td>
            </tr>
          </tbody>
        </table>
      </a-spin>
    </div>
  </a-modal>
</template>

<script>
import { getArchivesbyID } from '@/api/fileManagement'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    visible (n) {
      if (n) {
        this.fetchData()
      }
    }
  },
  data () {
    return {
      printObj: {
        id: 'printArea',
        closeCallback: () => {
          this.close()
        }
      },
      spinning: false,
      detailData: {}
    }
  },
  methods: {
    fetchData () {
      this.spinning = true
      getArchivesbyID({
        archivesid: this.data.ID
      })
        .then((res) => {
          this.detailData = res
          this.spinning = false
          this.$nextTick(() => {
            setTimeout(() => {
              this.$refs.printBtn.$el.click()
            }, 100)
          })
        })
        .finally(() => {
          this.spinning = false
        })
    },
    close () {
      this.$emit('update:visible', false)
      this.$emit('update:data', {})
    },
    hanldeAfterClose () {}
  }
}
</script>
<style lang="less" scoped>
#printArea {
  width: 700px;
  margin: 0 auto;

  .title {
    margin: 20px 0;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.5;
    text-align: center;
  }
  table {
    width: 700px;
    th,
    td {
      position: relative;
      padding: 9px 15px;
      min-height: 20px;
      line-height: 20px;
      font-size: 14px;
      text-align: center;
    }
    .text-left {
      text-align: left !important;
    }
  }
}
</style>
